<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义属性</title>
		<style>
			/* div宽高一致 300px 300px,圆，文本放大：10em,垂直居中
			   每个圆添加一个颜色
			 */
			span{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				font-size: 10em;
				text-align: center;
				line-height: 300px;
				color:#fff;
				/* 网页阴影：①滤镜：下阴影 ②文本阴影 ③盒子阴影 */
				/* 属性值：X  Y 模糊半径 阴影半径 颜色 内外阴影 inset */
				box-shadow: 5px 5px 50px 50px #aaaaff inset;
				/* 浮动定位：float属性：none|left|right; */
				float: left;
				/* clear清除浮动：left|right|both; */
			}
			span.d1{
				background-color: #ffaaff;
			}
			span.d2{
				background-color: #ffaa7f;
				clear: both;
			}
			span.d3{
				background-color: #ffff7f;
				/* clear清除浮动：left|right|both;直接作用在浮动元素上 */
				clear: both;
			}
			span.d4{
				background-color: #aaff7f;
			}
			span.d5{
				background-color: #aaffff;
			}
		</style>
	</head>
	<body>
		<!-- 什么是定位？页面元素通过“定位方式”指定具体位置
		     定位方式5种：①普通流定位|文档流定位：页面元素分为：块、行、行内元素，按照元素特点定位元素
			             ②浮动定位：页面上左右布局，可以让元素飘起来，飘起来的元素转成块元素
						 ③相对定位：相对于父级元素进行定位，没有父级，按照body定位
						              元素不脱离文档流
						 ④绝对定位：相对于父级元素进行定位，没有父级，按照页面坐顶角定位
						              元素脱离文档流
						  堆叠属性z-index属性：属性值：  9999
						 ⑤固定定位：广告接口固定在页面右下角，position:fixed
		 -->
		 <span class="d1">1</span>
		 <span class="d2">2</span>
		 <span class="d3">3</span>
		 <span class="d4">4</span>
		 <span class="d5">5</span>
	</body>
</html>